import React, { useState,useEffect,useCallback } from 'react'
import style from './index.module.scss'
import EedEnvelope from '@/components/EedEnvelope/index' 

export default function (props) {
    const [redPack, setRedPack]= useState([])
    const [show, setShow]= useState(false)
    const [isOver, setIsOver]= useState(false)
    const [allMoney, setAllMoney]= useState(false)
    const [wh, setWh]= useState({width: document.body.clientWidth, height: window.innerHeight})
    const allCount= 100
    var intv= null
    const initList= ()=>{
        var arr= []
        for(let i=0;i<20;i++){
            let rt= Math.random()>0.5?1:-1
            arr[i]={
                isOpen: false,
                isArrive: false,
                money: 0,
                index: i,
                left: Math.random()*(wh.width-40),
                top: -130,
                speed: Math.random()+1,
                rotate: Math.random()*60*rt
            }
        }
        setRedPack(arr)
    }
    const stop= ()=>{
        if(intv)clearInterval(intv)
    }
    const start= ()=>{
        var count=0
        intv= setInterval(()=>{
            setRedPack((redPack)=>{
                if(redPack.every(v=>v.isArrive)){
                    clearInterval(intv)
                    setIsOver(true)
                }

                return redPack.map(v=>{
                    if(v.top<wh.height+50){
                        v.top= v.top+v.speed
                    } else{
                        if(count<allCount){
                            let rt= Math.random()>0.5?1:-1

                            v.top= -130
                            v.isOpen= false
                            v.money= 0
                            v.left= Math.random()*(wh.width-40)
                            v.top= -130
                            v.speed= Math.random()+1
                            v.rotate= Math.random()*60*rt
                            count++
                        }
                        else{
                            v.isArrive= true
                        }
                        
                    }
                    return v
                })
            })
        },10)
    }
    const onOpen= (current)=>{
        setRedPack((redPack)=>{
            var mn= Math.random()*100
            redPack[current.index].money= mn
            redPack[current.index].isOpen= true
            
            setAllMoney((allMoney)=>{
                return allMoney+= mn
            })

            return redPack
        })
    }

    const onShow= ()=>{
        setShow((show)=>!show)
    }

    useEffect(()=>{
        if(!redPack.length &&show){
            initList()
            start()
        }
        if(redPack.length && !show){
            setRedPack([])
            stop()
        }
        if(typeof props.showBtn === "undefined"){ //显示测试按钮
            setShow(true)
        }
    },[redPack,show])

    return (
        <div>
            {
                props.showBtn?
                <button className={style.btn_isshow} onClick={onShow}>{props.btnText || "显示"}</button>
                : null
            }
            {
                show?
                <div className={isOver?'':style.content}>
                    {redPack.map((v,i)=>
                        <div key={i} style={{position: "absolute",top:v.top+"px",left:v.left+"px",transform: `rotate(${v.rotate}deg)`}}>
                            <EedEnvelope onClick={onOpen} isAnimate={false} detail={v} />
                        </div>
                    )}
                    {
                        isOver?"共获得"+allMoney+"元":null
                    }
                </div>
                :null
            }
        </div>
        
    )
}